<template>
	<view :style="skin" class="content property">
		<view class="tabsList">
			<!-- <view class="ratio">
				今天租赁率:70%
			</view> -->
			<u-tabs :activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
						transform: 'scale(1.2)'
					}" :list="list" :current="current" @click="clickTabs"></u-tabs>
		</view>
		
		<view class="propertyMain">
			<!-- 入库 -->
			<putStorage v-if="current === 0" @updateDeviceType="updateDeviceType"/>
			<!-- 出库 -->
			<!-- <outStorage v-else-if="current === 1" /> -->
			<!-- 在库 -->
			<inStock v-else-if="current === 1"  @updateDeviceType="updateDeviceType"/>
			<!-- 租赁中 -->
			<leasing v-else-if="current === 2" :leasingList="leasingList" />
			<!-- 逾期 -->
			<overdue pageType='property' v-else-if="current === 3" :overdueList="overdueList" :overdueIds='overdueIds'/>
			<!-- 丢失 -->
			<losePage v-else-if="current === 4"  @updateDeviceType="updateDeviceType"/>
			<!-- 故障 -->
			<malfunction v-else-if="current === 5" @maintain="maintain" @updateDeviceType="updateDeviceType" />
		</view>
		<customtabbar tabbarIndex="1" />
	</view>
</template>
<script>
	import customtabbar from '@/components/custom-tab-bar.vue'
	import putStorage from './putStorage.vue'
	import outStorage from './outStorage.vue'
	import inStock from './inStock.vue'
	import overdue from '../home/overdue.vue'
	import leasing from './leasing.vue'
	import losePage from './losePage.vue'
	import malfunction from './malfunction.vue'
	import {
		pageStockLost,
	} from '@/api/leaProductLost.js'
	import {
		mapState,
	} from 'vuex'
	import {
		getLease,
		addLease
	} from '@/utils/sql/sqllease.js'
	import {
		getDeviceType,
	} from '@/utils/sql/sqlDeviceType.js'
	import {
		pageStockFault,
	} from '@/api/leaProductFault.js'
	import { getUserAll } from '@/utils/sql/sqlUser.js'
	export default {
		data() {
			return {
				leasingList:[],
				overdueList: [],
				overdueIds: [],
				current: 0,
				list: [{
					name: this.$t('property.receiving'),
				}, {
					name: this.$t('property.inStore')
				}, {
					name: this.$t('property.inUse')
				}, {
					name: this.$t('property.overdue')
				}, {
					name: this.$t('property.lost')
				}, {
					name: this.$t('property.broken')
				}],
			}
		},
		async onShow() {
			uni.hideTabBar({
				animation: false
			})
			await this.getLeaseList();
			await this.getDeviceTypeList();
			this.getLostPage();
			this.getMalList();
			
			let uncounted = uni.getStorageSync('uncounted')
			if(uncounted){
				this.current = 1
				this.list.map(item=>{
					return item.disabled = true
				})
			}else{
				this.list.map(item=>{
					return item.disabled = false
				})
			}
			let that = this
			uni.$on('deviceCheckSu',function(){
				that.list.map(item=>{
					return item.disabled = false
				})
			})
		},
		onLoad() {
			let that = this
			uni.$on('lostBack',function(){
				console.log('lostBack');
				that.updateDeviceType();
				that.getLeaseList();
			});
			uni.$on('repairHandle',function(){
				that.getMalList();
			})
		},
		onReady() {
			let that = this
			let color = this.$store.getters.getSkinColor('--moduleColor');
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: color
			})
		},
		methods: {
			// 获取丢失列表
			getLostPage() {
				// lostStatus 0 没找回 1已经找回
				pageStockLost().then(res => {
					console.log(res);//0未审核 1通过 2不通过  
					if(res.code == 0){
						let len = res.data.records.length
						this.list.map((item, index) => {
							if (index == 4) {
								return item.name = `${this.$t('property.lost')}(${len})`;
							}
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'error'
						})
					}
					
				})
			},
			getMalList() {
				pageStockFault().then(res => {
					console.log(res);
					if (res.code == 0) {
						let len = res.data.records.length
						this.list.map((item, index) => {
							if (index == 5) {
								return item.name = `${this.$t('property.broken')}(${len})`;
							}
						})
					}
				})
			},
			// malLen(len){
			// 	this.list.map((item, index) => {
			// 		if (index == 5) {
			// 			return item.name = `${this.$t('property.broken')}(${len})`;
			// 		}
			// 	})
			// },
			// lostLen(len){
			// 	this.list.map((item, index) => {
			// 		if (index == 4) {
			// 			return item.name = `${this.$t('property.lost')}(${len})`;
			// 		}
			// 	})
			// },
			updateDeviceType(){
				this.getDeviceTypeList()
			},
			// 获取租赁列表
			getLeaseList() {
				let newDate = new Date().getTime()
				getLease().then(async res => {
					if (res.code == 0) {

						this.overdueList = res.data.filter(item => {
							return item.leaseStatus == 6
						})
						
						let leasingList = res.data.filter(item => {
							return item.leaseStatus == 4
						})
						let uRes = await getUserAll();
						let userArr = uRes.data
						leasingList.map(item =>{
							let index = userArr.findIndex(ele =>{return ele.customerAccount == item.customerAccount});
							return item.rentNum = userArr[index].rentNum,item.overdueNum = userArr[index].overdueNum
						})
						
						this.leasingList = leasingList
						
						console.log(this.leasingList);
						
						this.list.map((item, index) => {
							if (index == 0) {
								return item.name = this.$t('property.receiving')
							}
						})
						
						// this.list.map((item, index) => {
						// 	if (index == 1) {
						// 		return item.name = this.$t('property.outbound')
						// 	}
						// })
						
						
						this.list.map((item, index) => {
							if (index == 2) {
								return item.name = `${this.$t('property.inUse')}(${this.leasingList.length})`
							}
						})

						this.list.map((item, index) => {
							if (index == 3) {
								return item.name = `${this.$t('property.overdue')}(${this.overdueList.length})`
							}
						})
						
						this.list.map((item, index) => {
							if (index == 4) {
								return item.name = this.$t('property.lost')
							}
						})
						
						this.list.map((item, index) => {
							if (index == 5) {
								return item.name = this.$t('property.broken')
							}
						})
					}
				})
			},
			// 获取在库数据 
			async getDeviceTypeList() {
				let res = await getDeviceType()
				if (res.code == 0) {
					let inStore = 0
					res.data.forEach(item => {
						inStore += (parseInt(item.inStore) || 0)
					})
					// console.log(inStore, '111');
					this.deviceTypeList = res.data
					this.list.map((item, index) => {
						if (index == 1) {
							return item.name = `${this.$t('property.inStore')}(${inStore})`
						}
					})
				}
			},
			clickTabs(item) {
				let uncounted = uni.getStorageSync('uncounted')
				if(uncounted) return false
				this.current = item.index
			},
			maintain() {
				this.current = 1
			},
		},
		computed: {
			...mapState({
				skin: state => state.theme.skin,
			})
		},
		components: {
			customtabbar,
			putStorage,
			outStorage,
			inStock,
			overdue,
			leasing,
			losePage,
			malfunction
		}
	}
</script>
<style lang="scss" scoped>
	.property {
		.tabsList {
			background-color: #fff;
			height: 60px;
			padding: 8px 16px;
			box-sizing: border-box;

			.ratio {
				display: flex;
				flex-direction: row-reverse;
				margin-bottom: 8px;

			}
		}

		.propertyMain {
			margin-top: 8px;
			width: 100%;
			height: calc(100% - 120px);
			box-sizing: border-box;
			background-color: #fff;


		}
	}
</style>